<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可变大小面板</title>
</head>

<style>
    .ui-resizable {
        width: 400px;
        height: 240px;
        margin: 50px;
        position: relative;
        border: 1px solid black;
    }

    .title {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        background-color: #ccc;
    }

    .resizable-r {
        width: 10px;
        height: 100%;
        background-color: green;
        position: absolute;
        ;
        right: 0;
        top: 0;
        cursor: e-resize;
    }

    .resizable-b {
        width: 100%;
        height: 10px;
        background-color: blue;
        position: absolute;
        bottom: 0;
        right: 0;
        cursor: s-resize;
        ;
    }

    .resizable-rb {
        width: 10px;
        height: 10px;
        background-color: red;
        position: absolute;
        right: 0;
        bottom: 0;
        cursor: nw-resize;
    }
</style>

<body>
    <div id="ui-resizable" class="ui-resizable">
        <div id="title" class="title">resizable面板</div>
    </div>
</body>
<script type="text/javascript">
    window.onload = function () {
        //添加控制元素
        resizable("ui-resizable");
    }

    function resizable(panel_id) {
        //创建元素并添加属性
        var panel = document.getElementById(panel_id);
        var right = document.createElement("div");
        var bottom = document.createElement("div");
        var right_bottom = document.createElement("div");
        right.className = "resizable-r resizable-control";
        bottom.className = "resizable-b resizable-control";
        right_bottom.className = "resizable-rb resizable-control";
        //将元素添加到文档中
        panel.appendChild(right);
        panel.appendChild(bottom);
        panel.appendChild(right_bottom);
        document.body.appendChild(panel);
        //为每一个元素添加事件，并传入相应的参数
        right.onmousedown = function (event) {
            fnDown(event, panel, right, "right");
        }
        bottom.onmousedown = function (event) {
            fnDown(event, panel, bottom, "bottom");
        }
        right_bottom.onmousedown = function (event) {
            fnDown(event, panel, right_bottom, "right_bottom");
        }
    };

    function fnDown(event, panel, control, type) {
        event = event || window.event;
        //按下鼠标时，鼠标距离控制元素左上角的距离
        //由于控制元素是绝对定位的，而且有一个已经定位的父元素，所以控制元素的offsetLeft值与offsetTop值需要额外处理
        //控制元素right其offsetTop值为0.其真正距离页面上端的距离应该为它自己的offsetTop加上其父元素的offsetTop；
        //其offsetLeft为390，其真正距离页面左边的距离应该加上其父元素的offsetLeft
        var m_start_x = event.clientX - (control.offsetLeft + panel.offsetLeft);
        var m_start_y = event.clientY - (control.offsetTop + panel.offsetTop);



        document.onmousemove = function (event) {
            event = event || window.event;
            //计算控制元素移动的动态距离
            var l = event.clientX - panel.offsetLeft - m_start_x;
            var t = event.clientY - panel.offsetTop - m_start_y;
            //控制其移动最小距离
            if (l < 200) {
                l = 200;
            }
            if (t < 50) {
                t = 50;
            }
            //对不同类型的控制元素分别进行处理
            switch (type) {
                case "right":
                    //让控制元素跟随鼠标移动
                    //一定要记得加单位！！！
                    control.style.left = l + "px";
                    //调整面板
                    panel.style.width = l + 10 + "px";
                    break;
                case "bottom":
                    control.style.top = t + "px";
                    panel.style.height = t + 10 + "px";
                    break;
                case "right_bottom":
                    control.style.left = l + "px";
                    control.style.top = t + "px";
                    panel.style.width = l + 10 + "px";
                    panel.style.height = t + 10 + "px";
            }
        }

        document.onmouseup = function () {
            //取消鼠标跟随
            document.onmousemove = null;
            document.onmouseup = null;
            //将控制元素的位置复原
            var controls = document.getElementsByClassName("resizable-control");
            for (var i = 0, l = controls.length; i < l; i++) {
                controls[i].style.left = "";
                controls[i].style.top = "";
            }
        }
    }
</script>

</html>